<template>
	<div class="hello">
		<div class="toubu">
			<div class="touzuo">

			</div>
			<div class="touzhong">
				我的
			</div>
			<div class="touyou">

			</div>
		</div>
		<div class="beijingtu">
			<div class="tx">
				<div class="tutou">
					<img src="../assets/img/OIP-C.jpg">
				</div>

				<div class="mingzi">
					这里是昵称
				</div>
			</div>
		</div>
		<div class="yibai">
			<div class="tiao">
				<div class="neirong iconfont icon-daohangdizhi">
					<span>地址管理</span>
				</div>
				<div class="neirong iconfont icon-youhuiquan">
					<span>优惠券</span>

				</div>
				<div class="neirong iconfont icon-kefufill">
					<span>在线客服</span>

				</div>
				<div class="neirong iconfont icon-yijianfankui">
					<span>在线客服</span>

				</div>
				<div class="neirong iconfont icon-xiaoxi">
					<span>消息中心</span>

				</div>
				<div class="neirong iconfont icon-fenxiang">
					<span>分享APP</span>

				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import "@/assets/font/iconfont.css";
	export default {
		name: 'HelloWorld',
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.toubu {
		width: 100%;
		height: 40px;
		display: flex;
	}

	.touzhong {
		width: 100%;
		text-align: center;
		line-height: 40px;
		font-weight: 600
	}

	.beijingtu {
		height: 137px;
		width: 100%;
		background: url(../assets/img/01.png) no-repeat;
		background-size: 105% 110%;
	}

	.yibai {
		width: 100%;
		position: absolute;
		top: 157px;
	}

	.tiao {
		background-color: #FFFFFF;
		margin: 0 auto;
		width: 357px;
		height: 299px;
		padding: 18px 10px 17px 14px;
		box-sizing: border-box;
		border-radius: 5px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	}

	.neirong {
		width: 100%;
		height: 42px;
		line-height: 38px;
		color: #747474;

	}

	span {
		color: #747474;
		margin-left: 13px;
	}

	.tx {
		width: 160px;
		height: 50px;
		display: flex;
		align-items: center;
		position: absolute;
		top: 9%;
		left: 8%;

	}

	.tutou {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 5px solid #DEC296;
		overflow: hidden;
		margin-right: 14px;
	}

	.tutou img {
		width: 100%;
		height: 100%;

	}

	.mingzi {
		color: white;
	}
</style>
